<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>马鞍山非急救转运调度中心</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#1e40af'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<style>
:where([class^="ri-"])::before {
content: "\f3c2";
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* 车辆脉冲动画 */
@keyframes vehicle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
}

/* 进行中车辆脉冲动画（绿色） */
@keyframes vehicle-pulse-active {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
        transform: scale(1.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(1);
    }
}

/* 车辆图标基础样式 */
.vehicle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

/* 已分配车辆样式 */
.vehicle-assigned {
    background: linear-gradient(135deg, #3B82F6, #1E40AF);
    animation: vehicle-pulse 3s infinite ease-in-out;
}

/* 进行中车辆样式 */
.vehicle-active {
    background: linear-gradient(135deg, #10B981, #059669);
    animation: vehicle-pulse-active 2s infinite ease-in-out;
}

/* 车辆图标悬停效果 */
.vehicle-icon:hover {
    transform: scale(1.2);
    z-index: 20;
}

/* 车辆图标内部图标样式 */
.vehicle-icon i {
    color: white;
    font-size: 18px;
}

/* 车辆轨迹效果 */
.vehicle-trail {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
    animation: trail-pulse 2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes trail-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 车辆状态指示器 */
.vehicle-status-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    animation: status-blink 1.5s infinite ease-in-out;
}

@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.status-active {
    background: #10B981;
}

.status-assigned {
    background: #3B82F6;
}

.stats-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    width: 105%;
    max-width: 105%;
}

.stats-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.stats-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

.stat-card {
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
}

.stat-card:first-child {
    border-left: none;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.stat-number-black {
    font-size: 2.25rem;
    font-weight: 700;
    color: #000000;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-number,
.stat-card:hover .stat-number-black {
    transform: scale(1.05);
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.glow-effect {
    animation: pulse-glow 2s infinite;
}

.divider {
    width: 1px;
    background: rgba(229, 231, 235, 0.8);
    margin: 0 1rem;
}

/* 地图容器样式 */
.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="w-full h-screen flex flex-col">
<!-- 顶部标题栏 -->
<header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
    <div class="flex justify-between items-center">
        <div class="flex-1"></div>
        <h1 class="text-3xl font-bold flex-1 text-center tracking-wide">马鞍山非急救转运调度中心</h1>
        <div class="flex-1 flex justify-end items-center space-x-4">
            <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                <i class="fas fa-user-circle text-xl"></i>
                <span class="font-medium">调度员 张晓丽</span>
            </div>
            <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                <i class="fas fa-cog text-xl"></i>
            </button>
        </div>
    </div>
</header>

<!-- 导航栏 -->
<nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
    <div class="flex justify-center">
        <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
            <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
            <span>调度中心</span>
            <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
        </a>
        <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
            <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
            <span>订单管理</span>
        </a>
        <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
            <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
            <span>人员管理</span>
        </a>
        <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
            <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
            <span>车辆管理</span>
        </a>
        <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
            <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
            <span>车辆状态</span>
        </a>
        <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
            <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
            <span>实时监控</span>
        </a>
        <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
            <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
            <span>财务管理</span>
        </a>
    </div>
</nav>

<div class="flex flex-1 overflow-hidden">
<div class="w-96 bg-white border-r border-gray-200 overflow-y-auto">
<div class="space-y-0">
<!-- 进行中的订单 -->
<div class="bg-white border-b border-gray-100 p-4 cursor-pointer hover:bg-gray-50 transition-colors" data-vehicle-id="4">
<div class="flex">
<div class="w-2 bg-green-500 rounded-full mr-4"></div>
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<div class="text-sm font-medium text-gray-900">马鞍山市中心医院</div>
<div class="flex items-center space-x-4">
<div class="text-lg font-bold text-gray-900">65Km</div>
<div class="text-sm text-gray-600">南京鼓楼医院</div>
</div>
</div>
<div class="flex items-center justify-between mb-2">
<div class="text-xs text-gray-500">A20250618001</div>
<div class="text-sm font-medium text-gray-900">42.3Km</div>
</div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">2025-06-18 14:25</div>
<div class="flex items-center space-x-2">
<span class="flex items-center text-xs text-green-600 font-medium">
<i class="ri-play-circle-fill mr-1"></i>进行中
</span>
<span class="px-2 py-0.5 bg-red-100 text-red-600 rounded text-xs font-medium">C 高级护送</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white border-b border-gray-100 p-4 cursor-pointer hover:bg-gray-50 transition-colors" data-vehicle-id="5">
<div class="flex">
<div class="w-2 bg-green-500 rounded-full mr-4"></div>
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<div class="text-sm font-medium text-gray-900">马鞍山市人民医院</div>
<div class="flex items-center space-x-4">
<div class="text-lg font-bold text-gray-900">58Km</div>
<div class="text-sm text-gray-600">南京第一医院</div>
</div>
</div>
<div class="flex items-center justify-between mb-2">
<div class="text-xs text-gray-500">A20250618002</div>
<div class="text-sm font-medium text-gray-900">18.7Km</div>
</div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">2025-06-18 15:10</div>
<div class="flex items-center space-x-2">
<span class="flex items-center text-xs text-green-600 font-medium">
<i class="ri-play-circle-fill mr-1"></i>进行中
</span>
<span class="px-2 py-0.5 bg-orange-100 text-orange-600 rounded text-xs font-medium">A 普通护送</span>
</div>
</div>
</div>
</div>
</div>
<!-- 已分配的订单 -->
<div class="bg-white border-b border-gray-100 p-4 cursor-pointer hover:bg-gray-50 transition-colors" data-vehicle-id="1">
<div class="flex">
<div class="w-2 bg-blue-500 rounded-full mr-4"></div>
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<div class="text-sm font-medium text-gray-900">马鞍山市中医院</div>
<div class="flex items-center space-x-4">
<div class="text-lg font-bold text-gray-900">45Km</div>
<div class="text-sm text-gray-600">南京儿童医院</div>
</div>
</div>
<div class="flex items-center justify-between mb-2">
<div class="text-xs text-gray-500">A20250618003</div>
<div class="text-sm font-medium text-gray-900">0Km</div>
</div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">2025-06-18 15:45</div>
<div class="flex items-center space-x-2">
<span class="flex items-center text-xs text-blue-600 font-medium">
<i class="ri-time-fill mr-1"></i>已分配
</span>
<span class="px-2 py-0.5 bg-orange-100 text-orange-600 rounded text-xs font-medium">A 普通护送</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white border-b border-gray-100 p-4 cursor-pointer hover:bg-gray-50 transition-colors" data-vehicle-id="2">
<div class="flex">
<div class="w-2 bg-blue-500 rounded-full mr-4"></div>
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<div class="text-sm font-medium text-gray-900">马鞍山市妇幼保健院</div>
<div class="flex items-center space-x-4">
<div class="text-lg font-bold text-gray-900">52Km</div>
<div class="text-sm text-gray-600">南京脑科医院</div>
</div>
</div>
<div class="flex items-center justify-between mb-2">
<div class="text-xs text-gray-500">A20250618004</div>
<div class="text-sm font-medium text-gray-900">0Km</div>
</div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">2025-06-18 16:02</div>
<div class="flex items-center space-x-2">
<span class="flex items-center text-xs text-blue-600 font-medium">
<i class="ri-time-fill mr-1"></i>已分配
</span>
<span class="px-2 py-0.5 bg-orange-100 text-orange-600 rounded text-xs font-medium">A 普通护送</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white border-b border-gray-100 p-4 cursor-pointer hover:bg-gray-50 transition-colors" data-vehicle-id="3">
<div class="flex">
<div class="w-2 bg-blue-500 rounded-full mr-4"></div>
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<div class="text-sm font-medium text-gray-900">当涂县人民医院</div>
<div class="flex items-center space-x-4">
<div class="text-lg font-bold text-gray-900">38Km</div>
<div class="text-sm text-gray-600">南京明基医院</div>
</div>
</div>
<div class="flex items-center justify-between mb-2">
<div class="text-xs text-gray-500">A20250618005</div>
<div class="text-sm font-medium text-gray-900">0Km</div>
</div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">2025-06-18 16:15</div>
<div class="flex items-center space-x-2">
<span class="flex items-center text-xs text-blue-600 font-medium">
<i class="ri-time-fill mr-1"></i>已分配
</span>
<span class="px-2 py-0.5 bg-purple-100 text-purple-600 rounded text-xs font-medium">B 专业护送</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-1 relative flex flex-col map-container">
<!-- 地图背景 -->
<div class="map-background" id="mapBackground"></div>
<div class="map-overlay"></div>
<!-- 统计信息面板 - 压缩高度 -->
<div class="absolute top-4 left-1/2 transform -translate-x-1/2 z-10">
<div class="stats-container rounded-2xl p-2">
<div class="flex">
<!-- 车辆总数 -->
<div class="stat-card flex-1 text-center cursor-pointer">
<div class="flex items-center justify-center space-x-3">
<div class="stat-icon bg-gradient-to-br from-blue-500 to-blue-600 text-white">
<i class="ri-truck-line"></i>
</div>
<div class="flex flex-col items-start">
<div class="stat-number-black">6</div>
<div class="stat-label">车辆总数</div>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="divider"></div>
<!-- 任务中车辆 -->
<div class="stat-card flex-1 text-center cursor-pointer">
<div class="flex items-center justify-center space-x-3">
<div class="stat-icon bg-gradient-to-br from-green-500 to-green-600 text-white">
<i class="ri-play-circle-line"></i>
</div>
<div class="flex flex-col items-start">
<div class="stat-number">2</div>
<div class="stat-label">任务中车辆</div>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="divider"></div>
<!-- 待命车辆 -->
<div class="stat-card flex-1 text-center cursor-pointer">
<div class="flex items-center justify-center space-x-3">
<div class="stat-icon bg-gradient-to-br from-orange-500 to-orange-600 text-white">
<i class="ri-time-line"></i>
</div>
<div class="flex flex-col items-start">
<div class="stat-number text-orange-500">4</div>
<div class="stat-label">待命车辆</div>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="divider"></div>
<!-- 检修车辆 -->
<div class="stat-card flex-1 text-center cursor-pointer">
<div class="flex items-center justify-center space-x-3">
<div class="stat-icon bg-gradient-to-br from-gray-500 to-gray-600 text-white">
<i class="ri-tools-line"></i>
</div>
<div class="flex flex-col items-start">
<div class="stat-number">0</div>
<div class="stat-label">检修车辆</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 地图标注 -->
<div class="absolute top-24 left-20">
<div class="bg-white px-3 py-1 rounded text-sm text-gray-700 shadow">全椒县</div>
</div>
<div class="absolute top-40 right-48">
<div class="bg-white px-3 py-1 rounded text-sm text-gray-700 shadow">马鞍山市</div>
</div>
<div class="absolute bottom-48 left-36">
<div class="bg-white px-3 py-1 rounded text-sm text-gray-700 shadow">当涂县</div>
</div>
<div class="absolute bottom-32 right-40">
<div class="bg-white px-3 py-1 rounded text-sm text-gray-700 shadow">博望区</div>
</div>
<div class="absolute bottom-40 left-1/2">
<div class="bg-white px-3 py-1 rounded text-sm text-gray-700 shadow">芜湖市</div>
</div>
<!-- 车辆图标 - 只保留脉冲动画 -->
<div class="absolute top-1/3 right-1/4" data-vehicle-id="1">
    <div class="vehicle-icon vehicle-assigned">
        <div class="vehicle-trail"></div>
        <i class="ri-truck-fill"></i>
        <div class="vehicle-status-indicator status-assigned"></div>
    </div>
</div>
<div class="absolute bottom-1/3 left-1/3" data-vehicle-id="2">
    <div class="vehicle-icon vehicle-assigned">
        <div class="vehicle-trail"></div>
        <i class="ri-truck-fill"></i>
        <div class="vehicle-status-indicator status-assigned"></div>
    </div>
</div>
<div class="absolute top-1/2 right-1/3" data-vehicle-id="4">
    <div class="vehicle-icon vehicle-active">
        <div class="vehicle-trail"></div>
        <i class="ri-truck-fill"></i>
        <div class="vehicle-status-indicator status-active"></div>
    </div>
</div>
<div class="absolute top-1/4 left-1/4" data-vehicle-id="5">
    <div class="vehicle-icon vehicle-active">
        <div class="vehicle-trail"></div>
        <i class="ri-truck-fill"></i>
        <div class="vehicle-status-indicator status-active"></div>
    </div>
</div>
<!-- 车辆详情弹窗 - 贴紧右下角 -->
<div class="absolute bottom-4 right-4 bg-blue-500 text-white rounded-lg shadow-lg w-80" id="vehicleDetail">
<div class="p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
<i class="ri-truck-fill text-blue-500 text-lg"></i>
</div>
<div>
<div class="font-bold text-lg" id="vehiclePlate">皖E555325</div>
<div class="text-xs opacity-80" id="vehicleId">A20250618001</div>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="bg-red-500 text-white px-3 py-1 rounded text-sm font-medium" id="vehicleType">高级护送</span>
<button id="closeDetail" class="w-6 h-6 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full flex items-center justify-center transition-colors">
<i class="ri-close-line text-white text-sm"></i>
</button>
</div>
</div>
<div class="border-t border-blue-400 pt-3 mb-3">
<div class="flex justify-between text-sm">
<div class="text-center">
<div class="opacity-80">车速: <span id="vehicleSpeed">65</span>km/h</div>
</div>
<div class="text-center">
<div class="opacity-80">经纬度: <span id="vehicleLocation">654</span></div>
</div>
</div>
</div>
<div class="bg-white rounded p-3 mb-3 border-2 border-gray-200">
<div class="border-l-4 border-blue-500 pl-3 mb-3 flex items-center justify-between">
<div class="text-sm font-medium mb-2 text-gray-900">任务信息</div>
<div class="text-sm text-green-600 font-medium" id="taskStatus">进行中</div>
</div>
<div class="flex items-center mb-3">
<div class="w-6 h-6 bg-blue-500 text-white rounded flex items-center justify-center text-xs font-bold">起</div>
<div class="flex-1 mx-2 border-b border-dashed border-blue-500"></div>
<div class="w-6 h-6 bg-red-500 text-white rounded flex items-center justify-center text-xs font-bold">终</div>
</div>
<div class="flex justify-between text-xs mb-3">
<div class="text-gray-700" id="startPoint">马鞍山市中心医院</div>
<div class="text-gray-700" id="endPoint">南京鼓楼医院</div>
</div>
<div class="border-l-4 border-blue-500 pl-3 mb-3">
<div class="text-sm font-medium text-gray-900">快捷入口</div>
</div>
<div class="flex justify-center space-x-6">
<button class="flex flex-col items-center space-y-1 text-gray-700 cursor-pointer hover:text-blue-600 transition-colors">
<div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center hover:bg-blue-500 transition-colors">
<i class="ri-video-line text-white text-sm"></i>
</div>
<span class="text-xs">监控视频</span>
</button>
<button class="flex flex-col items-center space-y-1 text-gray-700 cursor-pointer hover:text-blue-600 transition-colors">
<div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center hover:bg-blue-500 transition-colors">
<i class="ri-file-list-line text-white text-sm"></i>
</div>
<span class="text-xs">订单详情</span>
</button>
<button class="flex flex-col items-center space-y-1 text-gray-700 cursor-pointer hover:text-blue-600 transition-colors">
<div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center hover:bg-blue-500 transition-colors">
<i class="ri-phone-line text-white text-sm"></i>
</div>
<span class="text-xs">电话呼叫</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 设置地图背景图片
    const mapBackground = document.getElementById('mapBackground');
    const mapImageUrl = 'https://z-cdn-media.chatglm.cn/files/5391c7e5-d197-4495-ab74-7f79aa04fca3_screenshot_2025-10-11_15-16-05.png?auth_key=1791716709-3f521db2505848588a2e450273e1981c-0-d26bdc6c09b4c4a6cea9e50a67528528';
    
    // 创建图片对象来预加载
    const img = new Image();
    img.onload = function() {
        mapBackground.style.backgroundImage = `url('${mapImageUrl}')`;
        console.log('地图背景图片加载成功');
    };
    img.onerror = function() {
        console.error('地图背景图片加载失败，使用备用方案');
        // 备用方案：使用纯色背景
        mapBackground.style.background = 'linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%)';
    };
    img.src = mapImageUrl;
    
    const vehicleDetail = document.getElementById('vehicleDetail');
    const closeDetail = document.getElementById('closeDetail');
    let currentVehicleId = '4'; // 默认显示车辆4的详情
    
    // 车辆数据
    const vehicleData = {
        1: {
            plate: '皖E555322',
            id: 'A20250618003',
            type: '普通护送',
            speed: '0',
            location: '651',
            status: '已分配',
            startPoint: '马鞍山市中医院',
            endPoint: '南京儿童医院'
        },
        2: {
            plate: '皖E555323',
            id: 'A20250618004',
            type: '普通护送',
            speed: '0',
            location: '652',
            status: '已分配',
            startPoint: '马鞍山市妇幼保健院',
            endPoint: '南京脑科医院'
        },
        3: {
            plate: '皖E555324',
            id: 'A20250618005',
            type: '专业护送',
            speed: '0',
            location: '653',
            status: '已分配',
            startPoint: '当涂县人民医院',
            endPoint: '南京明基医院'
        },
        4: {
            plate: '皖E555325',
            id: 'A20250618001',
            type: '高级护送',
            speed: '65',
            location: '654',
            status: '进行中',
            startPoint: '马鞍山市中心医院',
            endPoint: '南京鼓楼医院'
        },
        5: {
            plate: '皖E555326',
            id: 'A20250618002',
            type: '普通护送',
            speed: '55',
            location: '655',
            status: '进行中',
            startPoint: '马鞍山市人民医院',
            endPoint: '南京第一医院'
        }
    };
    
    // 更新车辆详情卡片
    function updateVehicleDetail(vehicleId) {
        const data = vehicleData[vehicleId];
        if (!data) return;
        
        document.getElementById('vehiclePlate').textContent = data.plate;
        document.getElementById('vehicleId').textContent = data.id;
        document.getElementById('vehicleType').textContent = data.type;
        document.getElementById('vehicleSpeed').textContent = data.speed;
        document.getElementById('vehicleLocation').textContent = data.location;
        document.getElementById('taskStatus').textContent = data.status;
        document.getElementById('startPoint').textContent = data.startPoint;
        document.getElementById('endPoint').textContent = data.endPoint;
        
        // 根据状态更新颜色
        const statusElement = document.getElementById('taskStatus');
        if (data.status === '进行中') {
            statusElement.className = 'text-sm text-green-600 font-medium';
        } else if (data.status === '已分配') {
            statusElement.className = 'text-sm text-blue-600 font-medium';
        } else {
            statusElement.className = 'text-sm text-gray-600';
        }
        
        // 根据护送类型更新标签颜色
        const typeElement = document.getElementById('vehicleType');
        if (data.type === '普通护送') {
            typeElement.className = 'bg-orange-500 text-white px-3 py-1 rounded text-sm font-medium';
        } else if (data.type === '专业护送') {
            typeElement.className = 'bg-purple-500 text-white px-3 py-1 rounded text-sm font-medium';
        } else if (data.type === '高级护送') {
            typeElement.className = 'bg-red-500 text-white px-3 py-1 rounded text-sm font-medium';
        }
    }
    
    // 显示车辆详情
    function showVehicleDetail(vehicleId) {
        currentVehicleId = vehicleId;
        updateVehicleDetail(vehicleId);
        vehicleDetail.classList.remove('hidden');
        
        // 高亮选中的车辆图标
        document.querySelectorAll('.vehicle-icon').forEach(icon => {
            icon.style.transform = 'scale(1)';
            icon.style.zIndex = '10';
        });
        
        const selectedVehicle = document.querySelector(`[data-vehicle-id="${vehicleId}"] .vehicle-icon`);
        if (selectedVehicle) {
            selectedVehicle.style.transform = 'scale(1.3)';
            selectedVehicle.style.zIndex = '30';
        }
    }
    
    // 隐藏车辆详情
    function hideVehicleDetail() {
        vehicleDetail.classList.add('hidden');
        currentVehicleId = null;
        
        // 恢复所有车辆图标的缩放
        document.querySelectorAll('.vehicle-icon').forEach(icon => {
            icon.style.transform = '';
            icon.style.zIndex = '10';
        });
    }
    
    // 初始化显示默认车辆详情
    updateVehicleDetail(currentVehicleId);
    
    // 左侧列表项点击事件
    document.querySelectorAll('[data-vehicle-id]').forEach(item => {
        item.addEventListener('click', function(e) {
            e.stopPropagation();
            const vehicleId = this.getAttribute('data-vehicle-id');
            showVehicleDetail(vehicleId);
        });
    });
    
    // 地图车辆图标点击事件
    document.querySelectorAll('[data-vehicle-id]').forEach(item => {
        item.addEventListener('click', function(e) {
            e.stopPropagation();
            const vehicleId = this.getAttribute('data-vehicle-id');
            showVehicleDetail(vehicleId);
        });
    });
    
    // 车辆详情卡片点击事件（阻止冒泡）
    vehicleDetail.addEventListener('click', function(e) {
        e.stopPropagation();
    });
    
    // 关闭按钮点击事件
    closeDetail.addEventListener('click', function(e) {
        e.stopPropagation();
        hideVehicleDetail();
    });
    
    // 点击空白区域隐藏车辆详情
    document.addEventListener('click', function(e) {
        if (currentVehicleId !== null) {
            hideVehicleDetail();
        }
    });
    
    // 快捷按钮点击事件
    document.querySelectorAll('#vehicleDetail button').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const buttonText = this.querySelector('span')?.textContent || this.textContent;
            console.log(`点击了: ${buttonText}`);
            // 这里可以添加相应的功能
        });
    });

    // 导航栏切换
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有活动状态
            document.querySelectorAll('.nav-item').forEach(nav => {
                nav.classList.remove('active');
                nav.style.color = '#374151';
                nav.style.fontWeight = 'normal';
                
                // 移除底部指示条
                const indicator = nav.querySelector('span:last-child');
                if (indicator && indicator.style.background) {
                    indicator.style.background = '';
                    indicator.style.width = '0';
                }
            });
            
            // 添加活动状态到当前项
            this.classList.add('active');
            this.style.color = '#3B82F6';
            this.style.fontWeight = '600';
            
            // 添加底部指示条
            let indicator = this.querySelector('span:last-child');
            if (!indicator || !indicator.style.background) {
                indicator = document.createElement('span');
                indicator.style.cssText = 'content: ""; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);';
                this.appendChild(indicator);
            }
        });
    });

    // 为所有非活动导航项添加悬停效果
    document.querySelectorAll('.nav-item:not(.active)').forEach(item => {
        item.addEventListener('mouseenter', function() {
            const indicator = document.createElement('span');
            indicator.style.cssText = 'content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);';
            indicator.classList.add('hover-indicator');
            this.appendChild(indicator);
            
            setTimeout(() => {
                indicator.style.width = '80%';
            }, 10);
        });
        
        item.addEventListener('mouseleave', function() {
            const indicator = this.querySelector('.hover-indicator');
            if (indicator) {
                indicator.style.width = '0';
                setTimeout(() => {
                    if (indicator.parentNode) {
                        indicator.remove();
                    }
                }, 300);
            }
        });
    });
});
</script>
</body>
</html>